<template>
  <div class="aa-container">
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('qualificationCode')}">
        <input type="text" required v-model="unitinfo.qualificationCode" v-validate="'required'" name="qualificationCode"/>
        <label data-content="测绘资质等级及编号*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('legalRepresentative')}">
        <input type="text" required v-model="unitinfo.legalRepresentative" v-validate="'required'" name="legalRepresentative"/>
        <label data-content="法人代表*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('email')}">
        <input type="text" required v-model="unitinfo.email" v-validate="'required|email'" name="email"/>
        <label data-content="电子邮箱*"></label>
      </div>
    </div>
    <div class="flex-row ">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contactAddress')}">
        <input type="text" required v-model="unitinfo.contactAddress" v-validate="'required'" name="contactAddress"/>
        <label data-content="通讯地址*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('postalCode')}">
        <input type="text" required v-model="unitinfo.postalCode" v-validate="'required|zipCode'" name="postalCode"/>
        <label data-content="邮政编码*"></label>
      </div>
    </div>
    <div class="flex-row">
      <div class="material-textfield green form-left" :class="{'validate-err': errors.has('contacts')}">
        <input type="text" required v-model="unitinfo.contacts" v-validate="'required'" name="contacts"/>
        <label data-content="联系人*"></label>
      </div>
      <div class="material-textfield green form-right" :class="{'validate-err': errors.has('contactsPhone')}">
        <input type="text" required v-model="unitinfo.contactsPhone" v-validate="'required|fax'" name="contactsPhone"/>
        <label data-content="联系电话*"></label>
      </div>
    </div>
    <!-- <div class="tc">
      <el-button type="success width-200" plain round>下一步</el-button>
    </div> -->
  </div>
</template>

<script>
  export default {
    title: '申请单位信息',
    name: 'appunit-info',
    data () {
      return {
        unitinfo: {},
      }
    },
    props: {
      data: {}
    },
    mounted () {
      this.unitinfo = Object.assign({}, this.data)
    },
    methods: {
      validate () {
        return this.$validator.validateAll()
      }
    },
    watch: {
      'unitinfo': {
        handler: function (val, oldVal) {
          this.$emit('update:data', this.unitinfo)
        },
        deep: true
      }
    }
  }
</script>
